<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>角色管理</title>
		<link rel="stylesheet" type="text/css" href="css/xtsz.css"/>
	</head>
	<body>
		<div class="main_content">
			<div class="con_left">
				<div class="l-box in">
					<a href="xtsz.html">角色管理</a>
				</div>
				<div class="l-box">
					<a href="xtsz2.html">角色权限管理</a>
				</div>
				<div class="l-box">
					<a href="xtsz3.html">管理员管理</a>
				</div>
				<div class="l-box">
					<a href="xtsz4.html">申诉建议</a>
				</div>
				<div class="l-box">
					<a href="xtsz5.html">操作日志</a>
				</div>
			</div>
			<div class="con_right fl">
				<div class="r_main">
					<div class="search">
						<span>条件查找<strong>|</strong></span>
						<div class="d-i-b vertical-top">
						<div class="s-one d-i-b">每页显示条数：
							<div class="f-inp-s d-i-b yeshu">
								<div>
									<select name='make'>
									    <option value='默认' selected>默认</option>
									    <option value='10'>10</option>
									    <option value='30'>30</option>
									    <option value='50'>50</option>
									    <option value='100'>100</option>
									    <option value='300'>300</option>
									</select>
								</div>
								<div class="s_img">
									<img src="img/select.png"/>
								</div>
							</div>
						</div>
						<div class="s-one d-i-b">排序：
							<div class="f-inp-s d-i-b px">
								<div>
									<select name='make'>
									    <option selected="selected" value="创建序号">创建序号</option>
										<option value="角色名称">角色名称</option>
										<option value="角色状态">角色状态</option>
									</select>
								</div>
								<div class="s_img">
									<img src="img/select.png"/>
								</div>
							</div>
						</div>
						<div class="s-one d-i-b">搜索选项：
							<div class="f-inp-s d-i-b px">
								<div>
									<select name='make'>
									    <option selected="selected" value="角色名称">角色名称</option>
										<option value="角色说明">角色说明</option>
									</select>
								</div>
								<div class="s_img">
									<img src="img/select.png"/>
								</div>
							</div>
								<input type="text" style="vertical-align: bottom;"/>
							<button class="btn-s">搜索</button>
						</div>
						</div>
					</div>
					<table border="1" cellspacing="0" cellpadding="0">
						<tr>
							<th style="width: 50px;">修改</th>
			                <th style="width: 50px;">删除</th>
			                <th style="width: 80px;">启用状态</th>
			                <th style="width: 300px;">角色名称</th>
			                <th>角色描述</th>
			                <th style="width: 150px;">创建日期</th>
						</tr>
						<tr>
							<td><a href="#" id="xiugai"><img src="img/xiugai.png"/></a></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
					</table>
					<div class="jintui">
						<button id="xinzeng">新增</button>
					</div>
						
				</div>
			</div>
			<div class="mask"></div>
			<form action="" method="post" style="position: absolute;z-index: 200;">
				<div id="openWindowModal" class="modal in">   
				    <div class="modal-header">
				        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				        <h3 id="title">新增角色</h3>  
				    </div>
				    <div class="modal-body">
				    	<div class="info-con">
							<p>角色名称：</p><input type="text" name="" id="input1" value="">
							<span style="color: red;display: none;">*</span>
						</div>
						<div class="group-radio" style="margin-left: 38px;">
							<div class="i-radio d-i-b">
							启用状态：
								<div class="f-inp-r">
									<input type="radio" name="zhuangtai" checked="checked"/><i class="ii"></i>
								</div>
								<span>启用</span>
							</div>
							<div class="i-radio d-i-b">
								<div class="f-inp-r">
									<input type="radio" name="zhuangtai"/><i></i>
								</div>
								<span>不启用</span>
							</div>
						</div>
						<div class="info-con">
							<p>角色描述：</p><textarea name="" rows="" cols=""></textarea>
						</div>
				    </div>
				    <div class="modal-footer">
				        <button id="openWindowBtn" class="btn btn-primary" type="submit">确 定</button>
				        <button class="btn cancel" data-dismiss="modal" aria-hidden="true" type="button">取 消</button>
				    </div>
				</div>
			</form>
		</div>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var bw=$('body').width();
			$('.mask').width(bw-247);
			$($("#xinzeng").on('click',function(){
				$(".mask").fadeIn();
				$("#openWindowModal").fadeIn();
			}))
			$(".close").on('click',function(){
				$(".mask").fadeOut();
				$("#openWindowModal").fadeOut();
			})
			$(".mask").on('click',function(){
				$(".mask").fadeOut();
				$("#openWindowModal").fadeOut();
			})
			$(".cancel").on('click',function(){
				$(".mask").fadeOut();
				$("#openWindowModal").fadeOut();
			})
			$('#openWindowBtn').on('click',function(){
				var input1=$.trim($('#input1').val());
				if(!input1){
					$('#input1').nextAll().eq(0).css('display','inline-block');
					return false;
				}else{
					return true;
				}
			})
			$('#xiugai').on('click',function(){
				$(".mask").fadeIn();
				$("#openWindowModal").fadeIn();
				$("#title")[0].innerText="修改角色";
				console.log($("#title")[0].innerText)
			})
			$('#xinzeng').on('click',function(){
				$(".mask").fadeIn();
				$("#openWindowModal").fadeIn();
				$("#title")[0].innerText="新增角色";
				console.log($("#title")[0].innerText)
			})
		</script>
	</body>
</html>